<!--
 * @Author: zheng yong tao
 * @Date: 2022-01-15 16:38:57
 * @LastEditors: zheng yong tao
 * @LastEditTime: 2022-03-15 00:14:54
 * @Description: 
-->
<template>
  <div class="article-list">
    <!-- <p class="title-des">{{ title }}</p> -->
    <el-table :data="articles" style="width: 100%">
      <el-table-column prop="telegram" label="telegram" width="180">
      </el-table-column>
      <el-table-column prop="github" label="github" width="180">
      </el-table-column>
      <el-table-column prop="email" label="email"> </el-table-column>
      <!-- <el-table-column prop="operate" label="operate">
        <template slot-scope="scope">
          <div>
            <div class="info editblock" v-if="getJBlogLogin">
              <span
                class="oprate-btn top-btn"
                @click="topBlog(scope.row.id, scope.row.is_top)"
              >
                {{ scope.row.is_top == 1 ? "取消置顶" : "置顶" }}
              </span>
              <span class="oprate-btn edit-btn" @click="editBlog(scope.row.id)">
                编辑
              </span>
              <span
                class="oprate-btn delete-btn"
                @click="deleteBlog(scope.row.id)"
              >
                删除
              </span>
            </div>
            <div class="read" @click="toDetail(scope.row.id)">detail</div>
          </div>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- <div class="article" v-for="(article, index) in articles" :key="index">
      <div class="header">
        <img
          class="is-top"
          v-if="article.is_top == 1"
          src="../../assets/img/isTop.png"
        />
        <div class="article-title" @click="toDetail(article.id)">
          {{ article.title }}
        </div>
      
        <div class="info">
          <span>{{
            article.type_name != null ? "《" + article.type_name + "》" : ""
          }}</span>
        </div>
        <div class="info">
          {{ dealValue(article.description) }}
        </div>
        <div class="info">
          <span> {{ dealValue(article.version) }}</span>
        </div>
        <div class="info">
          <span>{{ dealValue(article.high) }}</span>
        </div>
        <div class="info">
          <span>{{ dealValue(article.low) }}</span>
        </div>
        <div class="info">
          <span>{{ dealValue(article.mid) }}</span>
        </div>
        <div class="info editblock" v-if="getJBlogLogin">
          <span
            class="oprate-btn top-btn"
            @click="topBlog(article.id, article.is_top)"
          >
            {{ article.is_top == 1 ? "取消置顶" : "置顶" }}
          </span>
          <span class="oprate-btn edit-btn" @click="editBlog(article.id)">
            编辑
          </span>
          <span class="oprate-btn delete-btn" @click="deleteBlog(article.id)">
            删除
          </span>
        </div>
      </div>
      <div class="read" @click="toDetail(article.id)">detail</div>
    </div> -->
    <el-pagination
      v-if="total > 0"
      class="pagination-class"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      hide-on-single-page
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      :pager-count="5"
      :layout="layout"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { toTopBlog, deleteBlog, visitBlog } from "../../config/api";
import titleList from "../menu/titleList.vue";
import { mapGetters } from "vuex";
import { dateFormat } from "@/util/dateTool";
import { entitiestoUtf16 } from "@/util/util.js";
export default {
  name: "articleList",
  components: {
    titleList
  },
  computed: {
    ...mapGetters(["getJBlogLogin"])
  },
  props: {
    allArticles: {
      type: Array,
      default: () => {
        return [];
      }
    },
    title: {
      type: String,
      default: () => {
        return "";
      }
    }
  },
  watch: {
    allArticles() {
      this.initData();
    }
  },
  data() {
    return {
      total: 0,
      showNum: 5,
      pageSize: 10,
      currentPage: 1,
      articles: [],
      layout: "total, prev, pager, next, jumper"
    };
  },
  methods: {
    dealValue(v) {
      return v && v.length > 10 ? v.slice(0, 10) + "..." : v;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(currentPage) {
      // console.log(`当前页: ${val}`);
      this.currentPage = currentPage;
      const start = (currentPage - 1) * this.pageSize;
      localStorage.setItem("JPage", currentPage);
      this.articles = this.allArticles.slice(start, start + this.pageSize);
    },
    getTags(tags) {
      if (tags == undefined) return [];
      return tags.split(",");
    },
    getTitleList() {
      let articles = this.articles;
      let res = [];
      if (!articles) return [];
      articles.map(item => {
        res.push({ title: item.title, description: item.description });
      });
      return res;
    },
    currentPageChange(currentPage) {
      this.currentPage = currentPage;
      const start = (currentPage - 1) * this.pageSize;
      localStorage.setItem("JPage", currentPage);
      this.articles = this.allArticles.slice(start, start + this.pageSize);
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
    },
    toDetail(id) {
      this.httpPost(visitBlog, { id: id });
      this.$router.push({ name: "articleDetail", query: { id: id } });
    },
    editBlog(id) {
      this.$router.push({ name: "articleEdit", query: { id: id } });
    },
    topBlog(id, isTop) {
      if (confirm(isTop == 1 ? "确定取消置顶？" : "置顶该connect？")) {
        this.httpPost(toTopBlog, { id: id, isTop: isTop ^ 1 })
          .then(res => {
            if (res.code == 1) {
              this.refreshData();
            } else {
              alert(res.msg);
            }
          })
          .catch(err => {
            console.log("--err---", err);
          });
      }
    },
    deleteBlog(id) {
      if (confirm("您确定要删除吗？")) {
        this.httpPost(deleteBlog, { id: id })
          .then(res => {
            if (res.code == 1) {
              this.refreshData();
            } else {
              alert(res.msg);
            }
          })
          .catch(err => {
            console.log("--err---", err);
          });
      }
    },
    refreshData() {
      this.$emit("refreshData");
    },
    initData() {
      let JPage = localStorage.getItem("JPage");
      JPage != undefined ? (this.currentPage = parseInt(JPage)) : "";
      const allArticles = [...this.allArticles];
      allArticles.map(item => {
        item.create_time = dateFormat(item.create_time, "yyyy-mm-dd hh:MM:ss");
        item.title = entitiestoUtf16(item.title);
        item.description = entitiestoUtf16(item.description);
      });
      this.total = allArticles.length;
      let currentPage = this.currentPage;
      const start = (currentPage - 1) * this.pageSize;
      this.articles = allArticles.slice(start, start + this.pageSize);
    },
    initPage() {
      const windowWidth = document.getElementById("app");
      if (this.appendScript || windowWidth.offsetWidth <= 900) {
        this.layout = "total, prev, pager, next";
      }
      this.initData();
    }
  },
  created() {
    this.initPage();
  },
  beforeDestroy() {}
};
</script>

<style lang="scss" scoped>
.article-list {
  margin: 5vw;
  width: 80vw;
  .title-des {
    line-height: 30px;
    height: 30px;
    margin: 0 auto;
    opacity: 0.8;
    text-align: left;
    background: aliceblue;
  }
  .pagination-class {
    width: 30vw;
    margin-left: 10vw;
    padding: 1rem;
  }
  .article {
    display: flex;
    height: 70px;
    background-color: white;
    box-shadow: 10px 10px 5px #888888;
    width: 35vw;
    margin-left: 5vw;
    margin-top: 1rem;
    padding: 5px 5px;
    // padding-bottom: 3rem;
    font-family: cursive;
    border-radius: 5px;
    position: relative;
    .is-top {
      position: absolute;
      top: 0;
      left: 0;
      width: 6rem;
    }
    .header {
      display: flex;
      .article-title {
        font-size: x-large;
        font-weight: bold;
        cursor: pointer;
        list-style: none;
        display: inline-block;
        position: relative;
        height: 1.5rem;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          opacity: 0;
          border-bottom: 3px solid #4d8de6;
          transform: scaleX(0);
          transition: 0.2s ease-in-out;
        }
        &:hover {
          color: orange;
        }
        &.active:after,
        &:hover:after {
          opacity: 1;
          transform: scaleX(1);
        }
      }
      .editblock {
        bottom: 5px;
        position: absolute;
      }
      .info {
        margin-top: 0.5rem;
        font-size: large;
        .tag-list {
          display: flex;
          justify-content: space-around;
        }
        .oprate-btn {
          cursor: pointer;
          font-size: large;
          &:hover {
            text-decoration: underline;
          }
        }
        .edit-btn {
          color: orange;
        }
        .top-btn {
          color: orange;
        }
        .delete-btn {
          color: rgb(219, 72, 72);
        }
      }
    }
    .line {
      width: 80%;
      height: 2px;
      background-color: rgb(229, 226, 226);
      margin-left: 10%;
      margin-top: 1rem;
    }
    .content {
      margin-top: 1rem;
      font-size: large;
      text-align: left;
      text-indent: 2em;
      line-height: 1.5rem;
      // width: 200px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
    .read {
      color: orange;
      float: right;
      cursor: pointer;
      font-size: large;
      bottom: 10px;
      position: absolute;
      right: 10px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
@media screen and (max-width: 980px) {
  .arcticle-title-list {
    display: none;
  }
  .article-list {
    .article {
      width: 70vw;
    }
    .pagination-class {
      width: 70vw;
      padding: 1rem;
    }
  }
}
</style>
